<template>
  <div>
    <div v-show="this.$parent.tabstate == 0" class="body">
      <div class="item">
        <dh :hidden="zh.hidden" :state="zh.state"></dh>
        <img :src="img.zh" />
        <input
          type="text"
          v-model="param.username"
          :placeholder="$t('Please enter account')"
        />
      </div>
      <div class="item">
        <dh :hidden="mm.hidden" :state="mm.state"></dh>
        <img :src="img.mm" />
        <input
          type="password"
          v-model="param.password"
          :placeholder="$t('Please enter password')"
        />
      </div>
      <div class="jc_item">
        <JcRange
          status="status"
          :startText="$t('Please slide the slider')"
          :successText="$t('Verified Successfully')"
        ></JcRange>
      </div>
      <div class="zd_item">
        <div class="zdlg">
          <input type="checkbox" v-model="autologin" /> {{ $t("Autologin") }}
        </div>
        <!-- <div class="fog">忘记密码</div> -->
      </div>
      <div @click="Login" class="bt_item" :class="[!clickState ? 'click' : '']">
        {{ $t("Login") }}
      </div>
    </div>
    <div v-show="this.$parent.tabstate == 1" class="body">
      <div class="item">
        <dh :hidden="sj.hidden" :state="sj.state"></dh>
        <img :src="img.zh" />
        <input
          type="text"
          v-model="param.phone"
          :placeholder="$t('Please enter phone number')"
        />
      </div>
      <div class="yz_item">
        <div class="yzm">
          <dh :hidden="yzm.hidden" :state="yzm.state"></dh>
          <img :src="img.yzm" />
          <input
            type="text"
            v-model="param.yzm"
            :placeholder="$t('Verification code')"
          />
        </div>
        <div @click="getYZM" class="hqyzm" :class="[waitState ? 'wait' : '']">
          {{ waitState ? waitTime + "S" : $t("Get verification code") }}
        </div>
      </div>
      <div @click="Login" class="bt_item" :class="[!clickState ? 'click' : '']">
        {{ $t("Login") }}
      </div>
    </div>
  </div>
</template>
<script>
import JcRange from "./jcRange.vue";
import { dh } from "../dh";
import { login } from "@/api/login.js";
import { checkPhone } from "@/utils/util.js";
import { generatorDynamicRouter } from "@/router/generator-routers";
export default {
  name: "tab_1",
  components: {
    JcRange,
    dh,
  },
  watch: {
    "param.username"(val) {
      if (val.trim().length > 0) {
        this.zh.state = false;
        let time = setTimeout(() => {
          this.zh.hidden = false;
          clearTimeout(time);
        }, 1000);
      }
    },
    "param.password"(val) {
      if (val.trim().length > 0) {
        this.mm.state = false;
        let time = setTimeout(() => {
          this.mm.hidden = false;
          clearTimeout(time);
        }, 1000);
      }
    },
    "param.phone"(val) {
      if (val.trim().length > 0) {
        this.sj.state = false;
        let time = setTimeout(() => {
          this.sj.hidden = false;
          clearTimeout(time);
        }, 1000);
      }
    },
    "param.yzm"(val) {
      if (val.trim().length > 0) {
        this.yzm.state = false;
        let time = setTimeout(() => {
          this.yzm.hidden = false;
          clearTimeout(time);
        }, 1000);
      }
    },
  },
  data() {
    return {
      img: {
        zh: require("@/assets/imgs/zh.png"),
        mm: require("@/assets/imgs/mm.png"),
        yzm: require("@/assets/imgs/yz.png"),
      },
      status: false,
      zh: { state: false, hidden: false },
      mm: { state: false, hidden: false },
      sj: { state: false, hidden: false },
      yzm: { state: false, hidden: false },
      param: {
        username: "",
        password: "",
        phone: "",
        yzm: "",
      },
      autologin: false,
      clickState: true,
      waitState: false,
      waitTime: 60,
    };
  },
  methods: {
    getYZM() {
      if (checkPhone(this.param.phone)) {
        if (!this.waitState) {
          this.waitState = true;
          this.waitTime = 60;
          let time = setInterval(() => {
            this.waitTime--;
            if (this.waitTime === 0) {
              this.waitState = false;
              clearInterval(time);
            } else {
              time;
            }
          }, 1000);
        }
      } else {
        this.$message({
          message: this.$t("The phone number is entered incorrectly!"),
          type: "warning",
        });
      }
    },
    Login() {
      this.clickState = false;
      let time = setTimeout(() => {
        this.clickState = true;
        clearTimeout(time);
      }, 100);
      let that = this;
      let yz = true;
      if (this.$parent.tabstate == 0) {
        if (this.param.username.trim() == "") {
          this.yzstate = false;
          this.zh.state = true;
          this.zh.hidden = true;
          yz = false;
        }
        if (this.param.password.trim() == "") {
          this.yzstate = false;
          this.mm.state = true;
          this.mm.hidden = true;
          yz = false;
        }
        if (!this.status) {
          this.$message({
            message: this.$t("Please slide the slider") + "!",
            type: "warning",
          });
          return false;
        }
        if (!yz) return false;
        login().then((res) => {
          if (res.data.code === "0000") {
            if (that.autologin) {
              that.$cookies.set(
                "userinfo",
                res.data.data.additionalInformation
              );
            } else {
              that.$session.set(
                "userinfo",
                res.data.data.additionalInformation
              );
            }
            generatorDynamicRouter().then((routers) => {
              that.$session.set("userNav", routers);
              if (typeof that.$route.params.url !== "undefined") {
              window.top.location.href = that.$route.params.url;
            } else {
              that.$router.replace({ path: "/" });
            }
            });
            
          }
        });
      }
      if (this.$parent.tabstate == 1) {
        if (this.param.phone.trim() == "") {
          this.yzstate = false;
          this.sj.state = true;
          this.sj.hidden = true;
          yz = false;
        }
        if (this.param.yzm.trim() == "") {
          this.yzstate = false;
          this.yzm.state = true;
          this.yzm.hidden = true;
          yz = false;
        }
        if (!yz) return false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@width: 76%;
@height: 6vh;
@mgt: 2.5vh;
.body {
  //   padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
}
.item {
  position: relative;
  margin-top: @mgt;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: @width;
  height: @height;
  background: white;
  border-radius: 4px;
  border: 1px solid rgb(231, 231, 231);
  img {
    height: 3vh;
    width: 3vh;
    padding: 0 10px;
  }
  input {
    width: calc(100% - 40px);
    height: 90%;
    border: none;
    outline: none;
    font-size: 0.8rem;
  }
}
.zd_item {
  margin-top: @mgt;
  width: @width;
  height: 3vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 0.8rem;
  color: #2d92ff;
  .zdlg {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
    input {
      width: 15px;
      height: 15px;
      border: none;
      outline: none;
      margin-right: 10px;
    }
  }
  .fog {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 50%;
    height: 100%;
  }
}
.bt_item {
  cursor: pointer;
  margin-top: @mgt;
  width: @width;
  height: @height;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: #2d92ff;
  box-shadow: 0px 4px 4px 0px rgba(109, 108, 108, 0.8);
  border-radius: 8px;
  color: white;
  font-size: 1rem;
}
.jc_item {
  margin-top: @mgt;
  width: @width;
  height: @height;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yz_item {
  margin-top: @mgt;
  width: @width;
  height: @height;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yzm {
  position: relative;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: @width;
  height: 100%;
  width: 50%;
  background: white;
  border: 1px solid rgb(231, 231, 231);
  img {
    height: 3vh;
    width: 3vh;
    padding: 0 10px;
  }
  input {
    width: calc(100% - 40px);
    height: 100%;
    border: none;
    outline: none;
    font-size: 0.7rem;
  }
}
.hqyzm {
  cursor: pointer;
  width: 40%;
  height: 5.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(252, 252, 252, 1);
  border: 1.5px solid rgb(231, 231, 231);
  border-radius: 6px;
  color: #2d92ff;
  font-weight: 600;
  font-size: 0.7rem;
}
.click {
  animation: move 0.2s;
}
@keyframes move {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-0.5px, 1px);
  }
}
</style>